import React, { Component } from "react";
import store from "../../redux/store";
import { addAction, minusAction, asyncAddAction } from '../../redux/actions/CollAction';
import { jiaAction, jianAction, asyncJiaAction } from "../../redux/actions/CommentAction";
export default class Redux extends Component {
    render() {
        return (
            <div>
                <br />
                <br />
                <br />
                <br />
                <h2>Redux 状态操作</h2> 
                <hr />
                <h4>收藏数 {store.getState().coll}</h4>
                <button className="btn btn-danger btn-sm" onClick={this.minus}>
                    减少
                </button>     
                &nbsp;
                <button className="btn btn-primary btn-sm" onClick={this.add}>
                    新增 
                </button>   
                &nbsp;
                <button className="btn btn-info btn-sm" onClick={this.asyncAdd}>
                    1s 后新增 2 
                </button>

                <h4>评论数 {store.getState().comment}</h4>
                <button onClick={() => {
                    store.dispatch(jianAction(1));
                }}>减少</button>
                <button onClick={() => {
                    store.dispatch(jiaAction(1));
                }}>增加</button>
                <button onClick={() => {
                    store.dispatch(asyncJiaAction(1));
                }}>1s 后增加评论数</button>
            </div>
        );
    }

    add = () => {
        //新增状态值
        store.dispatch(addAction(1));
    };

    minus = () => {
        //减少状态值
        store.dispatch(minusAction(1));     
    }

    //异步修改状态
    asyncAdd = () => {
        store.dispatch(asyncAddAction(10));
    }

    componentDidMount(){
        console.log(store.getState());
    }
}
